<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>教育平台首页原型</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: #f6f7f9;
    }
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .phone-frame {
      width: 375px;
      height: 667px;
      background: #f6f7f9;
      box-shadow: 0 8px 32px rgba(60,80,120,0.10);
      border-radius: 32px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .container {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: 0 0 28px 28px;
      padding: 0 12px 0 12px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }
    .page {
      width: 100%;
      height: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
    }
    .page.active {
      display: flex;
    }
    .top-bar {
      width: 100%;
      height: 56px;
      background: linear-gradient(90deg, #e6eefc 0%, #cbe5ff 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0 0 18px 18px;
      box-shadow: 0 2px 8px rgba(60,80,120,0.04);
      padding: 0 16px;
      position: relative;
    }
    .welcome-text {
      font-size: 18px;
      color: #3a6ed8;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .top-illustration {
      width: 38px;
      height: 38px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .edu-hero {
      width: 90px;
      height: 90px;
      margin: 24px 0 10px 0;
      border-radius: 18px;
      background: #e6eefc;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(60,80,120,0.08);
      animation: float 2.5s ease-in-out infinite alternate;
    }
    @keyframes float {
      0% { transform: translateY(0); }
      100% { transform: translateY(-8px); }
    }
    .main-features {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px 0;
      margin: 18px 0 0 0;
    }
    .feature-card {
      width: 48%;
      background: #f6f7fa;
      border-radius: 14px;
      box-shadow: 0 1px 6px rgba(60,80,120,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 18px 0 12px 0;
      cursor: pointer;
      transition: box-shadow 0.2s, background 0.2s;
      position: relative;
      min-height: 90px;
    }
    .feature-card:active {
      background: #e6eefc;
      box-shadow: 0 2px 12px rgba(60,80,120,0.10);
    }
    .feature-icon {
      width: 32px;
      height: 32px;
      margin-bottom: 8px;
    }
    .feature-title {
      font-size: 15px;
      color: #3a6ed8;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .bottom-tip {
      width: 100%;
      margin-top: 18px;
      text-align: center;
      font-size: 13px;
      color: #b0b8c7;
      letter-spacing: 0.5px;
      background: #f6f7fa;
      border-radius: 8px;
      padding: 7px 0 6px 0;
      box-shadow: 0 1px 4px rgba(60,80,120,0.03);
    }
    .message-list {
      width: 100%;
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .message-item {
      width: 100%;
      background: #f6f7fa;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 1px 4px rgba(60,80,120,0.04);
      cursor: pointer;
      transition: background 0.2s;
    }
    .message-item:active {
      background: #e6eefc;
    }
    .message-title {
      font-size: 15px;
      color: #3a6ed8;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .message-content {
      font-size: 13px;
      color: #7a8599;
      line-height: 1.4;
    }
    .message-time {
      font-size: 12px;
      color: #b0b8c7;
      margin-top: 6px;
    }
    .profile-section {
      width: 100%;
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .profile-item {
      width: 100%;
      background: #f6f7fa;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 1px 4px rgba(60,80,120,0.04);
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .profile-item:active {
      background: #e6eefc;
    }
    .profile-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .profile-icon {
      width: 24px;
      height: 24px;
    }
    .profile-text {
      font-size: 15px;
      color: #3a6ed8;
      font-weight: 500;
    }
    .profile-right {
      font-size: 14px;
      color: #7a8599;
    }
    .course-list {
      width: 100%;
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .course-item {
      width: 100%;
      background: #f6f7fa;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 1px 4px rgba(60,80,120,0.04);
      cursor: pointer;
      transition: background 0.2s;
    }
    .course-item:active {
      background: #e6eefc;
    }
    .course-name {
      font-size: 16px;
      color: #3a6ed8;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .course-info {
      font-size: 13px;
      color: #7a8599;
      line-height: 1.4;
    }
    .tabbar {
      width: 100%;
      height: 60px;
      background: #fff;
      border-top: 1px solid #e6eefc;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      box-shadow: 0 -2px 8px rgba(60,80,120,0.04);
    }
    .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #7a8599;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.2s;
      user-select: none;
      padding-top: 4px;
    }
    .tabbar-item.active {
      color: #3a6ed8;
      font-weight: 600;
    }
    .tabbar-icon {
      width: 26px;
      height: 26px;
      margin-bottom: 2px;
      display: block;
    }
  </style>
</head>
<body>
  <div class="phone-frame">
    <div class="container">
      <!-- 首页 -->
      <div class="page active" id="homePage">
        <div class="top-bar">
          <span class="welcome-text">Hi，老师，欢迎回来！</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="14" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><rect x="10" y="20" width="12" height="4" rx="2" fill="#fff" stroke="#3a6ed8" stroke-width="1.2"/><path d="M10 22c4-2 8-2 12 0" stroke="#8bb6f9" stroke-width="1.2"/></svg>
          </span>
        </div>
        <div class="edu-hero">
          <svg viewBox="0 0 80 80" fill="none"><ellipse cx="40" cy="70" rx="28" ry="8" fill="#e6eefc"/><rect x="32" y="30" width="16" height="24" rx="8" fill="#8bb6f9"/><circle cx="40" cy="24" r="10" fill="#fff" stroke="#3a6ed8" stroke-width="2"/><rect x="36" y="54" width="8" height="10" rx="4" fill="#ffd966"/></svg>
        </div>
        <div class="main-features">
          <div class="feature-card" data-page="course">
            <div class="feature-icon">
              <svg viewBox="0 0 32 32" fill="none"><rect x="4" y="8" width="24" height="16" rx="3" fill="#fff" stroke="#3a6ed8" stroke-width="1.5"/><path d="M4 10c6-3 18-3 24 0" stroke="#8bb6f9" stroke-width="1.2"/><path d="M16 8v16" stroke="#3a6ed8" stroke-width="1.2"/></svg>
            </div>
            <div class="feature-title">课程</div>
          </div>
          <div class="feature-card" data-page="homework">
            <div class="feature-icon">
              <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="8" width="16" height="16" rx="4" fill="#fff" stroke="#3a6ed8" stroke-width="1.5"/><path d="M12 16h8M12 20h8" stroke="#8bb6f9" stroke-width="1.2"/></svg>
            </div>
            <div class="feature-title">作业</div>
          </div>
          <div class="feature-card" data-page="notice">
            <div class="feature-icon">
              <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="10" width="16" height="12" rx="4" fill="#fff" stroke="#3a6ed8" stroke-width="1.5"/><circle cx="24" cy="10" r="3" fill="#ffd966"/></svg>
            </div>
            <div class="feature-title">通知</div>
          </div>
          <div class="feature-card" data-page="grade">
            <div class="feature-icon">
              <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="8" width="16" height="16" rx="4" fill="#fff" stroke="#3a6ed8" stroke-width="1.5"/><path d="M12 20l4-4 4 4" stroke="#8bb6f9" stroke-width="1.2"/></svg>
            </div>
            <div class="feature-title">成绩</div>
          </div>
        </div>
        <div class="bottom-tip">欢迎使用智慧校园平台，开启高效教学新体验！</div>
      </div>

      <!-- 信息页面 -->
      <div class="page" id="infoPage">
        <div class="top-bar">
          <span class="welcome-text">消息中心</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><rect x="6" y="8" width="20" height="16" rx="4" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><path d="M6 12c6-3 14-3 20 0" stroke="#8bb6f9" stroke-width="1.2"/></svg>
          </span>
        </div>
        <div class="message-list">
          <div class="message-item">
            <div class="message-title">系统通知</div>
            <div class="message-content">您的课程《数学基础》将于明天上午9点开始，请提前做好准备。</div>
            <div class="message-time">2024-01-15 14:30</div>
          </div>
          <div class="message-item">
            <div class="message-title">作业提醒</div>
            <div class="message-content">学生张三已提交作业《函数与导数》，请及时批改。</div>
            <div class="message-time">2024-01-15 13:45</div>
          </div>
          <div class="message-item">
            <div class="message-title">成绩更新</div>
            <div class="message-content">期中考试成绩已更新，请查看学生成绩详情。</div>
            <div class="message-time">2024-01-15 12:20</div>
          </div>
        </div>
      </div>

      <!-- 我的页面 -->
      <div class="page" id="minePage">
        <div class="top-bar">
          <span class="welcome-text">个人中心</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="12" r="6" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><rect x="8" y="20" width="16" height="6" rx="3" fill="#8bb6f9"/></svg>
          </span>
        </div>
        <div class="profile-section">
          <div class="profile-item">
            <div class="profile-left">
              <span class="profile-icon">👤</span>
              <span class="profile-text">个人信息</span>
            </div>
            <span class="profile-right">></span>
          </div>
          <div class="profile-item">
            <div class="profile-left">
              <span class="profile-icon">⚙️</span>
              <span class="profile-text">设置</span>
            </div>
            <span class="profile-right">></span>
          </div>
          <div class="profile-item">
            <div class="profile-left">
              <span class="profile-icon">📚</span>
              <span class="profile-text">我的课程</span>
            </div>
            <span class="profile-right">3门</span>
          </div>
          <div class="profile-item">
            <div class="profile-left">
              <span class="profile-icon">📊</span>
              <span class="profile-text">教学统计</span>
            </div>
            <span class="profile-right">></span>
          </div>
        </div>
      </div>

      <!-- 课程页面 -->
      <div class="page" id="coursePage">
        <div class="top-bar">
          <span class="welcome-text">我的课程</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><rect x="4" y="8" width="24" height="16" rx="3" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><path d="M4 10c6-3 18-3 24 0" stroke="#8bb6f9" stroke-width="1.2"/><path d="M16 8v16" stroke="#3a6ed8" stroke-width="1.2"/></svg>
          </span>
        </div>
        <div class="course-list">
          <div class="course-item">
            <div class="course-name">数学基础</div>
            <div class="course-info">周一、三、五 9:00-10:30<br>教室：A101 | 学生：45人</div>
          </div>
          <div class="course-item">
            <div class="course-name">高等数学</div>
            <div class="course-info">周二、四 14:00-15:30<br>教室：B203 | 学生：38人</div>
          </div>
          <div class="course-item">
            <div class="course-name">线性代数</div>
            <div class="course-info">周五 16:00-17:30<br>教室：C305 | 学生：42人</div>
          </div>
        </div>
      </div>

      <!-- 作业页面 -->
      <div class="page" id="homeworkPage">
        <div class="top-bar">
          <span class="welcome-text">作业管理</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="8" width="16" height="16" rx="4" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><path d="M12 16h8M12 20h8" stroke="#8bb6f9" stroke-width="1.2"/></svg>
          </span>
        </div>
        <div class="message-list">
          <div class="message-item">
            <div class="message-title">函数与导数</div>
            <div class="message-content">已提交：32人 | 待批改：8人<br>截止时间：2024-01-20</div>
            <div class="message-time">数学基础</div>
          </div>
          <div class="message-item">
            <div class="message-title">矩阵运算</div>
            <div class="message-content">已提交：28人 | 待批改：10人<br>截止时间：2024-01-22</div>
            <div class="message-time">线性代数</div>
          </div>
          <div class="message-item">
            <div class="message-title">微积分基础</div>
            <div class="message-content">已提交：35人 | 待批改：3人<br>截止时间：2024-01-25</div>
            <div class="message-time">高等数学</div>
          </div>
        </div>
      </div>

      <!-- 通知页面 -->
      <div class="page" id="noticePage">
        <div class="top-bar">
          <span class="welcome-text">校园通知</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="10" width="16" height="12" rx="4" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><circle cx="24" cy="10" r="3" fill="#ffd966"/></svg>
          </span>
        </div>
        <div class="message-list">
          <div class="message-item">
            <div class="message-title">期末考试安排</div>
            <div class="message-content">2024年春季学期期末考试将于1月25日开始，请各位老师提前准备。</div>
            <div class="message-time">2024-01-15 10:00</div>
          </div>
          <div class="message-item">
            <div class="message-title">教师培训通知</div>
            <div class="message-content">本周五下午2点将举办教学技能培训，地点：学术报告厅。</div>
            <div class="message-time">2024-01-14 16:30</div>
          </div>
          <div class="message-item">
            <div class="message-title">系统维护公告</div>
            <div class="message-content">系统将于本周日凌晨2-4点进行维护，期间可能无法正常访问。</div>
            <div class="message-time">2024-01-13 14:15</div>
          </div>
        </div>
      </div>

      <!-- 成绩页面 -->
      <div class="page" id="gradePage">
        <div class="top-bar">
          <span class="welcome-text">成绩管理</span>
          <span class="top-illustration">
            <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="8" width="16" height="16" rx="4" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><path d="M12 20l4-4 4 4" stroke="#8bb6f9" stroke-width="1.2"/></svg>
          </span>
        </div>
        <div class="course-list">
          <div class="course-item">
            <div class="course-name">数学基础 - 期中考试</div>
            <div class="course-info">平均分：78.5 | 最高分：95<br>已录入：45人 | 待录入：0人</div>
          </div>
          <div class="course-item">
            <div class="course-name">高等数学 - 单元测试</div>
            <div class="course-info">平均分：82.3 | 最高分：98<br>已录入：38人 | 待录入：0人</div>
          </div>
          <div class="course-item">
            <div class="course-name">线性代数 - 作业成绩</div>
            <div class="course-info">平均分：85.7 | 最高分：100<br>已录入：42人 | 待录入：0人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabbar">
      <div class="tabbar-item active" data-tab="home">
        <span class="tabbar-icon">
          <svg viewBox="0 0 32 32" fill="none"><path d="M4 16L16 6l12 10v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V16z" fill="#e6eefc" stroke="#3a6ed8" stroke-width="1.5"/><rect x="12" y="20" width="8" height="6" rx="2" fill="#8bb6f9"/></svg>
        </span>
        首页
      </div>
      <div class="tabbar-item" data-tab="info">
        <span class="tabbar-icon">
          <svg viewBox="0 0 32 32" fill="none"><rect x="6" y="8" width="20" height="16" rx="4" fill="#e6eefc" stroke="#3a6ed8" stroke-width="1.5"/><path d="M6 12c6-3 14-3 20 0" stroke="#8bb6f9" stroke-width="1.2"/></svg>
        </span>
        信息
      </div>
      <div class="tabbar-item" data-tab="mine">
        <span class="tabbar-icon">
          <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="12" r="6" fill="#e6eefc" stroke="#3a6ed8" stroke-width="1.5"/><rect x="8" y="20" width="16" height="6" rx="3" fill="#8bb6f9"/></svg>
        </span>
        我的
      </div>
    </div>
  </div>
  <script>
    // Tabbar交互
    const tabItems = document.querySelectorAll('.tabbar-item');
    const pages = document.querySelectorAll('.page');
    tabItems.forEach(item => {
      item.addEventListener('click', function() {
        tabItems.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        const tabName = this.dataset.tab;
        pages.forEach(page => page.classList.remove('active'));
        if(tabName === 'home') {
          document.getElementById('homePage').classList.add('active');
        } else if(tabName === 'info') {
          document.getElementById('infoPage').classList.add('active');
        } else if(tabName === 'mine') {
          document.getElementById('minePage').classList.add('active');
        }
      });
    });
    // 功能卡片交互
    document.querySelectorAll('.feature-card').forEach(card => {
      card.addEventListener('click', function() {
        const pageName = this.dataset.page;
        pages.forEach(page => page.classList.remove('active'));
        document.getElementById(pageName + 'Page').classList.add('active');
      });
    });
  </script>
</body>
</html>